<template>
  <el-row>
    <el-col :span="24">
      <ul class="mediainfo">
        <li>
          <span>音频名称：</span>
          <span v-show="isedit">
            <el-input placeholder="请输入视频名称，2-30个字符" v-model.trim="seriesData.name" size="mini" clearable class="input-w" :maxlength="30" :minlength="2" show-word-limit />
          </span>
          <span v-show="!isedit">{{seriesData.name}}</span>
        </li>
        <li>
          <span>所属直播间：</span>
          <span>{{seriesData.medianame}}</span>
        </li>
        <li>
          <span>音频ID：</span>
          <span>{{seriesData.seriesid}}</span>
        </li>
        <li>
          <span>状态：</span>
          <span v-if="seriesData.inuse == 1" style="color: #00C653">上线</span>
          <span v-else style="color: red">下线</span>
        </li>
        <li>
          <span>类型：</span>
          <span>音频点播</span>
        </li>
        <li>
          <span>付费类型：</span>
          <span v-if="seriesData.media && seriesData.media.paytype == 0">
            <span style="color: #67C23A">免费</span>
          </span>
          <span v-else>
            <span v-show="!isedit">
              <span v-if="seriesData.paytype == 1" style="color: #F56C6C">付费</span>
              <span v-else style="color: #67C23A">免费</span>
            </span>
            <span v-show="isedit">
              <el-switch
                      v-model="seriesData.paytype"
                      inline-prompt
                      active-text="付费"
                      inactive-text="免费"
                      active-color="#F56C6C"
                      inactive-color="#67C23A"
                      :active-value="1"
                      :inactive-value="0"
              />
            </span>
          </span>
        </li>
        <li>
          <span>排序：</span>
          <span>{{seriesData.sequence}}</span>
        </li>
        <li>
          <span>创建时间：</span>
          <span>{{seriesData.ctime ? seriesData.ctime.replace('T', ' ') : '--'}}</span>
        </li>
        <li>
          <span>创建账号ID：</span>
          <span>{{seriesData.uid}}</span>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
  import {toRef} from "vue";

  export default {
    name: "AudioSeries",
    props: {
      seriesinfo: {
        type: Object
      },
      isedit: {
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      const seriesData = toRef(props, 'seriesinfo')

      return {
        seriesData
      }
    }
  }
</script>

<style scoped>

</style>
